<!DOCTYPE HTML>
<html th:with="title='新增用户'" >
<head th:include="fragments/header :: header">
</head>
<body id="app">
<div class="page-container">
	<form action="/security/user/save" method="post" class="form form-horizontal" id="user-form">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>用户类型：</label>
			<div class="formControls col-xs-7 col-sm-8">
			<select class="select size-S" id="type" name="type" >
			<option value="1"  selected = "selected" >商户</option>	
			</select>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>名称：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" class="input-text size-S" id="name" name="name">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>登录名：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" class="input-text size-S" id="loginName" name="loginName">
			</div>
		</div>	
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">外部商户编号：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" class="input-text size-S" id="outSn" name="outSn">
			</div>
		</div>	
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">邮箱：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="text" class="input-text size-S" id="email" name="email">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>密码：</label>
			<div class="formControls col-xs-7 col-sm-8">
				<input type="password" class="input-text size-S" id="password" name="password">
			</div>
		</div> 
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">用户角色：</label>
			<div class="formControls col-xs-3 col-sm-3">
				<label>已分配角色(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userGroupIds" name="userGroupIds" multiple="multiple" size="6">
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div> 		
			<div class="formControls col-xs-1 col-sm-1" style="height:100%;">
			   <label>&nbsp;</label>
		       <label class="form-label"><input title="全部移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userGroupIds_rightAll" value=">>"/></label>
		       <label class="form-label"><input title="选中的移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userGroupIds_rightSelected" value=">"/></label>
		       <label class="form-label"><input title="选中的移动到左边" class="btn btn-default btn-block size-S radius" type="button"  id="userGroupIds_leftSelected" value="<"/></label>
		       <label class="form-label"><input title="全部移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userGroupIds_leftAll" value="<<"/></label>
			</div>					
			<div class="formControls col-xs-3 col-sm-4">
				<label>待分配角色(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userGroupIds_to" multiple="multiple" size="6">
						<option th:each="group:${groups}" th:value="${group.id}" th:text="${group.name}"></option>											
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div> 		
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-3">模板类型：</label>
			<div class="formControls col-xs-3 col-sm-3">
				<label>已分配模板类型(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userTemplateTypeIds" name="userTemplateTypeIds" multiple="multiple" size="6">
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div>
			<div class="formControls col-xs-1 col-sm-1" style="height:100%;">
				<label>&nbsp;</label>
				<label class="form-label"><input title="全部移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userTemplateTypeIds_rightAll" value=">>"/></label>
				<label class="form-label"><input title="选中的移动到右边" class="btn btn-default btn-block size-S radius" type="button"  id="userTemplateTypeIds_rightSelected" value=">"/></label>
				<label class="form-label"><input title="选中的移动到左边" class="btn btn-default btn-block size-S radius" type="button"  id="userTemplateTypeIds_leftSelected" value="<"/></label>
				<label class="form-label"><input title="全部移动到左边" class="btn btn-default btn-block size-S radius" type="button" id="userTemplateTypeIds_leftAll" value="<<"/></label>
			</div>
			<div class="formControls col-xs-3 col-sm-4">
				<label>待分配模板类型(双击左右选择)</label>
				<span class="select-box">
					<select class="select size-S" id="userTemplateTypeIds_to" multiple="multiple" size="6">
						<option th:each="templateType:${templateTypes}" th:value="${templateType.id}" th:text="${templateType.templateTypeName}"></option>
					</select>
				</span>
				<label>按住ctrl键，单击选择多项</label>
			</div>
		</div>

		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
				<input class="btn btn-primary size-L radius" type="submit" value="提交">
				<input class="btn btn-primary size-L radius" type="button" onclick="closeWin()" value="关闭">
			</div>
		</div>
	</form>
</div>

<script type="text/javascript">
function closeWin() {
	var index = parent.layer.getFrameIndex(window.name);
	parent.layer.close(index);
}
function resetForm() {
	$('#user-form')[0].reset();
	$("#userGroupIds").find("option").appendTo($("#userGroupIds_to"));
	$("#shopCode").html("");
}
$(function(){	
	$('#userGroupIds').multiselect({submitAllLeft: false, submitAllRight: false});
	$('#userTemplateTypeIds').multiselect({submitAllLeft: false, submitAllRight: false});
	$("#user-form").validate({
		rules:{
			type:{
				required:true,
				maxlength:16
			},
			name:{
				required:true,
				maxlength:16
			},
			loginName:{
				required:true,
				maxlength:16
			},
			password:{
				required:true,
				minlength:6,
				maxlength:16
			}
		},
		onkeyup:false,
		focusCleanup:true,
		success:"valid",
		submitHandler:function(form){
			var data = $('#user-form').serialize();
			var selectedGroups = $("#userGroupIds").find("option");
			for(var j = 0; j < selectedGroups.length; j++) {
				data += "&userGroups["+j+"]=" + $(selectedGroups[j]).prop("value");
			}
			var selectedTemplateTypes = $("#userTemplateTypeIds").find("option");
			for(var j = 0; j < selectedTemplateTypes.length; j++) {
				data += "&userTemplateTypes["+j+"]=" + $(selectedTemplateTypes[j]).prop("value");
			}
			$.ajax({
			    type: "POST",
			    url: '/security/user/save',
			    data: data,
			    beforeSend: function () {
			    	
			    },
			    complete: function () {
			    	
			    },
			    error: function(request) {
			    	layer.alert("系统出错");
			    },
			    success: function(data) {
			    	if (data.status == 0) {
			    		refreshUParentList();
						layer.alert(data.message, function() {
							var index = parent.layer.getFrameIndex(window.name);
							parent.layer.close(index);
						});
					}else{
						layer.alert(data.message);
					}
			    }
			});
		}
	});
});
var app = new Vue({
	  el: '#app',
	  data: {
		  roles: []
	  }
	});


function loadRoles() {
	$.ajax({
	    type: "get",
	    url: '/security/role/findAll',
	    beforeSend: function () {
	    },
	    complete: function () {
	    	layer.close(tip);
	    },
	    error: function(request) {
	        layer.alert("系统错误");
	    },
	    success: function(result) {
	        if (result.status == 0) {
	        	var data = result.data;
	        	app.roles = data;
	        } else {
	        	sessionCheckTimeOut(result);
	        }
	    }
	});
}

$(function() {
	//loadRoles();
});
</script> 
</body>
</html>